var sleep = new Vue({
	el: '#sleep',
	data: {
		themeColor: '#83D99E',
		timeTab: ['日', '周', '月', '年'],
		timeType: 0,
		myDate: new Date,
		nowTime: '',
		startTime: '',
		endTime: '',
		progress: 0,
		nightSleep: {
			hour: 1,
			min: 2
		},
		shortSleep: {
			hour: 1,
			min: 2
		},
		chart: null
	},
	created() {
		this.nowTime = dayjs(this.myDate).format('YYYY/MM/DD');
		this.startTime = dayjs(this.myDate).subtract(1 % 7, 'days').startOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
		this.endTime = dayjs(this.myDate).subtract(1 % 7, 'days').endOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
	},
	mounted() {
		this.initCalendar()
		this.initMainChart()
	},
	methods: {
		initMainChart() {
			const data = [{
				type: '深睡',
				year: '1750',
				value: 163,
				percent: 0.24511278195488723
			}, {
				type: '浅睡',
				year: '1750',
				value: 502,
				percent: 0.7548872180451128
			}, {
				type: '深睡',
				year: '1800',
				value: 203,
				percent: 0.24224343675417662
			}, {
				type: '浅睡',
				year: '1800',
				value: 635,
				percent: 0.7577565632458234
			}, {
				type: '深睡',
				year: '1850',
				value: 276,
				percent: 0.2543778801843318
			}, {
				type: '浅睡',
				year: '1850',
				value: 809,
				percent: 0.7456221198156682
			}, {
				type: '深睡',
				year: '1900',
				value: 408,
				percent: 0.3011070110701107
			}, {
				type: '浅睡',
				year: '1900',
				value: 947,
				percent: 0.6988929889298893
			}, {
				type: '深睡',
				year: '1950',
				value: 547,
				percent: 0.2806567470497691
			}, {
				type: '浅睡',
				year: '1950',
				value: 1402,
				percent: 0.7193432529502309
			}, {
				type: '深睡',
				year: '1999',
				value: 729,
				percent: 0.16708686683474674
			}, {
				type: '浅睡',
				year: '1999',
				value: 3634,
				percent: 0.8329131331652533
			}, {
				type: '深睡',
				year: '2050',
				value: 628,
				percent: 0.10651289009497965
			}, {
				type: '浅睡',
				year: '2050',
				value: 5268,
				percent: 0.8934871099050203
			}, {
				type: '深睡',
				year: '2100',
				value: 828,
				percent: 0.10227272727272728
			}, {
				type: '浅睡',
				year: '2100',
				value: 7268,
				percent: 0.8977272727272727
			}];
			const chart = new F2.Chart({
				id: 'mainChart',
				pixelRatio: window.devicePixelRatio
			});
			chart.source(data, {
				percent: {
					min: 0,
					formatter: function formatter(val) {
						return (val * 100).toFixed(0) + '%';
					}
				}
			});
			chart.tooltip({
				showItemMarker: false,
				triggerOn: ['touchstart', 'touchmove'],
				triggerOff: 'touchend', // 消失的触发行为，可自定义
				showCrosshairs: true, // 是否显示辅助线
				yTipBackground: {
					fill: null
				},
				crosshairsStyle: {
					stroke: this.themeColor
				},
				background: {
					radius: 10,
					fill: '#EEEEEE',
					padding: [6, 10]
				}, // tooltip 内容框的背景样式
				valueStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				nameStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				onShow: function onShow(ev) {
					const items = ev.items;
					items[0].name = null;
					items[0].name = items[0].title;
					items[0].value = items[0].value;
				}
			});
			chart.interval()
				.position('year*percent')
				.color('type')
				.adjust('stack');
			chart.axis('percent',false)
			chart.render();
		},
		initCalendar() {
			//天
			var stepDate = new XNDatepicker(document.querySelector("#step-date"), {
				format: 'YYYY/MM/DD',
				type: 'date',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			}, function (close) {
				console.log(close)
			})
			//周
			var stepDate = new XNDatepicker(document.querySelector("#step-week"), {
				format: 'YYYY/MM/DD',
				type: 'week',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.startTime,
				endTime: this.endTime,
				separator: '-',
				showType: 'modal',
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
			//月
			var stepDate = new XNDatepicker(document.querySelector("#step-month"), {
				format: 'YYYY/MM',
				type: 'month',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
			//年
			var stepDate = new XNDatepicker(document.querySelector("#step-year"), {
				type: 'year',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function (data) {
				console.log(data)
			})
		},

	},
	filters: {
		filterTitle(num) {
			switch (num * 1) {
				case 0:
					return '零星小睡'
				default:
					return '平均零星小睡'
			}
		}
	}
})

$(document).ready(function () {
	$(".date-info .show-date").on('click', function () {
		$("#dateMask").addClass('show').removeClass("hide");
	})
})